import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Statistic, Progress, List, Avatar, Typography, Spin } from 'antd';
import { 
  ClockCircleOutlined, 
  BookOutlined, 
  TeamOutlined, 
  TrophyOutlined,
  CheckCircleOutlined 
} from '@ant-design/icons';
import { useAuth } from '../store/AuthContext';
import { statisticsService } from '../services/api';
import AchievementsSection from '../components/AchievementsSection';
import HabitsSection from '../components/HabitsSection';
import GoalsSection from '../components/GoalsSection';
import QuickStatsSection from '../components/QuickStatsSection';

const { Title } = Typography;

const DashboardContent: React.FC = () => {
  const { user, isAuthenticated } = useAuth();
  const [stats, setStats] = useState<any>(null);
  const [statsLoading, setStatsLoading] = useState(false);

  // 加载统计数据
  useEffect(() => {
    if (isAuthenticated) {
      loadStats();
    }
  }, [isAuthenticated]);

  const loadStats = async () => {
    setStatsLoading(true);
    try {
      const response = await statisticsService.getTodayStats();
      if ((response as any).success) {
        setStats((response as any).data);
      }
    } catch (error) {
      console.error('加载统计数据失败:', error);
    } finally {
      setStatsLoading(false);
    }
  };

  if (statsLoading) {
    return (
      <div style={{ textAlign: 'center', padding: '40px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div>
      <Title level={2}>学习概览</Title>
      
      {/* 快速统计概览 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24}>
          <QuickStatsSection />
        </Col>
      </Row>

      {/* 学习目标 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24}>
          <GoalsSection />
        </Col>
      </Row>

      {/* 成就和习惯 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} lg={12}>
          <AchievementsSection />
        </Col>
        <Col xs={24} lg={12}>
          <HabitsSection />
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="学习进度" extra={<BookOutlined />}>
            <div style={{ marginBottom: 16 }}>
              <Typography.Text>本周学习计划</Typography.Text>
              <Progress percent={75} status="active" />
            </div>
            <div style={{ marginBottom: 16 }}>
              <Typography.Text>月度目标</Typography.Text>
              <Progress percent={60} />
            </div>
            <div>
              <Typography.Text>年度计划</Typography.Text>
              <Progress percent={35} />
            </div>
          </Card>
        </Col>
        
        <Col xs={24} lg={12}>
          <Card title="最近任务" extra={<CheckCircleOutlined />}>
            <List
              dataSource={[
                { title: '完成React学习笔记', time: '2小时前' },
                { title: '复习数据结构', time: '4小时前' },
                { title: '英语单词背诵', time: '6小时前' },
                { title: '项目代码审查', time: '1天前' },
              ]}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={<Avatar icon={<CheckCircleOutlined />} style={{ backgroundColor: '#52c41a' }} />}
                    title={item.title}
                    description={item.time}
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>

    </div>
  );
};

export default DashboardContent;
